import React, { useCallback } from "react";
import { Platform, View, Text } from "react-native";
import {
  Menu,
  MenuOptions,
  MenuOption,
  MenuTrigger,
} from "react-native-popup-menu";
import {ChatMessage, MessageType} from "@/types/chat-message";
import Clipboard from "@react-native-clipboard/clipboard";
import { useThemeColors } from "@/theme";
import Ionicons from "@expo/vector-icons/Ionicons";

/**
 * 消息操作菜单组件
 *
 * 基于react-native-popup-menu封装的消息操作菜单，提供消息复制、转发、引用、删除等常用功能
 *
 * @author BelovedLYC
 */
interface MessageMenuProps {
  /**
   * 消息对象
   */
  message: ChatMessage<any, any>;

  /**
   * 是否为当前用户发送的消息
   */
  isCurrentUser: boolean;

  /**
   * 子元素，作为菜单的触发元素
   */
  children: React.ReactNode;

  /**
   * 消息引用回调函数
   */
  onReply?: (message: ChatMessage<any, any>) => void;

  /**
   * 消息转发回调函数
   */
  onForward?: (message: ChatMessage<any, any>) => void;

  /**
   * 消息删除回调函数
   */
  onDelete?: (messageId: string) => void;
}

/**
 * 消息菜单选项样式
 */
const menuOptionStyles = {
  optionWrapper: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    paddingVertical: 10,
    paddingHorizontal: 15,
  },
  optionText: {
    fontSize: 16,
    marginLeft: 10,
  },
};

/**
 * 消息操作菜单组件
 */
const MessageMenu: React.FC<MessageMenuProps> = ({
  message,
  isCurrentUser,
  children,
  onReply,
  onForward,
  onDelete,
}) => {
  const themeColors = useThemeColors();

  /**
   * 处理复制消息
   */
  const handleCopy = useCallback(() => {
    if (message.messageType === MessageType.TEXT) {
      const textPayload =
        typeof message.content === "string"
          ? JSON.parse(message.content)
          : message.content;
      Clipboard.setString(textPayload.text);
    }
  }, [message]);

  /**
   * 处理回复消息
   */
  const handleReply = useCallback(() => {
    onReply && onReply(message);
  }, [message, onReply]);

  /**
   * 处理转发消息
   */
  const handleForward = useCallback(() => {
    onForward && onForward(message);
  }, [message, onForward]);

  /**
   * 处理删除消息
   */
  const handleDelete = useCallback(() => {
    onDelete && onDelete(message.messageId);
  }, [message.messageId, onDelete]);

  return (
    <Menu>
      <MenuTrigger
        triggerOnLongPress={true}
        customStyles={{
          triggerWrapper: {
            flex: 1,
          },
        }}
      >
        {children}
      </MenuTrigger>

      <MenuOptions
        customStyles={{
          optionsContainer: {
            borderRadius: 8,
            backgroundColor:
              themeColors.mode === "dark" ? "#2C3E50" : "#FFFFFF",
            borderColor: themeColors.border,
            borderWidth: 0.5,
            padding: 5,
            width: 180,
            shadowColor: "#000",
            shadowOffset: {
              width: 0,
              height: 2,
            },
            shadowOpacity: 0.25,
            shadowRadius: 3.84,
            elevation: 5,
          },
        }}
      >
        {/* 复制选项（仅文本消息可复制） */}
        {message.messageType === MessageType.TEXT && (
          <MenuOption onSelect={handleCopy} customStyles={menuOptionStyles}>
            <Ionicons
              name="copy-outline"
              size={22}
              color={themeColors.primary}
            />
            <View style={{ marginLeft: 10 }}>
              <Text style={{ color: themeColors.text }}>复制</Text>
            </View>
          </MenuOption>
        )}

        {/* 回复选项 */}
        <MenuOption onSelect={handleReply} customStyles={menuOptionStyles}>
          <Ionicons
            name="return-down-back-outline"
            size={22}
            color={themeColors.primary}
          />
          <View style={{ marginLeft: 10 }}>
            <Text style={{ color: themeColors.text }}>回复</Text>
          </View>
        </MenuOption>

        {/* 转发选项 */}
        <MenuOption onSelect={handleForward} customStyles={menuOptionStyles}>
          <Ionicons
            name="arrow-redo-outline"
            size={22}
            color={themeColors.primary}
          />
          <View style={{ marginLeft: 10 }}>
            <Text style={{ color: themeColors.text }}>转发</Text>
          </View>
        </MenuOption>

        {/* 删除选项（仅自己的消息可删除） */}
        {isCurrentUser && (
          <MenuOption onSelect={handleDelete} customStyles={menuOptionStyles}>
            <Ionicons name="trash-outline" size={22} color="#FF3B30" />
            <View style={{ marginLeft: 10 }}>
              <Text style={{ color: "#FF3B30" }}>删除</Text>
            </View>
          </MenuOption>
        )}
      </MenuOptions>
    </Menu>
  );
};

export default MessageMenu;
